<template>
  <div class="login">
    <el-row>
      <el-col :span="12"></el-col>
      <el-col :span="12">
        <div class="form">
          <el-form ref="formRef" :model="form" label-width="80px" :rules="rules">
            <h2>欢迎来到小余甄选</h2>

            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username" />
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" type="password" autocomplete="off" show-password />
            </el-form-item>

            <el-form-item>
              <el-button style="width: 100%" type="primary" @click="onSubmit(formRef)">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<!-- 登录组件 -->
<script setup lang="ts">
import { onBeforeUnmount, reactive, ref } from 'vue'
import { useUserStore } from '@/store/module/user'
import { FormRules, FormInstance } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { getTime } from '@/utils/time'
const router = useRouter()
const route = useRoute()

const useStore = useUserStore()

// 表单验证的类型
interface RuleForm {
  username: string
  password: string
}

// 表单验证
const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'change' },
    { min: 5, message: '用户名只是是5位', trigger: 'change' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'change' },
    { min: 6, message: '密码至少是6位', trigger: 'change' }
  ]
})

const formRef = ref<FormInstance>()

const form = reactive({
  username: 'admin',
  password: 'atguigu123'
})

onBeforeUnmount(() => {
  ElNotification({
    title: '欢迎回来',
    message: `${getTime()}`,
    type: 'success'
  })
})

// 提交
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  // 表单验证
  await formEl.validate(async valid => {
    if (valid) {
      // 需要加await
      await useStore.post_user_info_async(form)
      await useStore.get_user_info()
      let redirect = route.query.redirect as string

      let name = redirect.split('/')[1]
      // 如果该用户的路由权限中没有该路径则跳往首页
      if (useStore.routes.includes(name.slice(0, 1).toUpperCase() + name.slice(1))) {
        router.push({ path: redirect || '/' })
      } else {
        router.push('/')
      }
    } else {
      ElMessage.error(`请正确填写信息`)
    }
  })
}
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/images/login/background.jpg') no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: column;
  justify-content: center;

  .form {
    width: 80%;
    background: url('../../assets/images/login/login_form.png') no-repeat;
    background-size: cover;
    padding: 40px;

    h2 {
      font-size: 26px;
      color: white;
      margin: 40px 0px;
      text-align: center;
    }
  }
}

:deep(.el-form-item__label) {
  color: white;
}
</style>
